<template>
  <div style="display: flex;flex-direction: column;justify-items: center;align-items: center">
    <h4>订单编号:{{ orderId }}</h4>
    <div style="display: flex;flex-direction: column;justify-items: center;align-items: center">
      <el-card class="box-card" style="width: 360px">
        <el-form :model="ksOrderReplyForm">
          <div style="display: flex; justify-content: space-between;margin-bottom: 2px">
            <el-input type="textarea" v-model="ksOrderReplyForm.replyContent"
                      :placeholder="ks.attachmentTxt"></el-input>
            <el-button type="primary" style="margin-left: 2px" size="mini" @click="ksOrderReplyFormSubmit">发送
            </el-button>
          </div>
          <div>
            <el-tag icon="el-icon-refresh" style="margin-left: 1px;cursor: pointer"
                    @click="importKsOrderImage()" size="mini" type="primary">
              <i class="el-icon-s-platform"></i>上传图片
            </el-tag>
            <el-tag style="margin-left: 1px;cursor: pointer"
                    @click="ksImportAudio()" size="mini" type="primary">
              <i class="el-icon-s-platform"></i>上传录音
            </el-tag>
          </div>
        </el-form>
      </el-card>
    </div>


    <!--    客诉上传图片-->
    <el-dialog
      title="客诉上传图片"
      :visible.sync="ks.image.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!ks.image.isUploading" :show-close="!ks.image.isUploading">
      <el-upload
        action="#"
        ref="ksImage"
        :limit="5"
        :on-exceed="imageExceed"
        accept=".jpg, .png"
        :headers="ks.image.headers"
        :disabled="ks.image.isUploading"
        :on-change="ksImageFileChange"
        :before-upload="imageBeforeUpload"
        :auto-upload="false"
        list-type="picture"
        drag
        :file-list="ks.image.uploadFiles"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入jpg, png格式文件,最多5张图片。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitKsImageForm" :loading="ks.image.isUploading"
                   :disabled="ks.image.isUploading">
          {{ ks.image.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="closeKsImageUploadPage" :disabled="ks.image.isUploading">取 消</el-button>
      </div>
    </el-dialog>


    <!--客诉上传录音-->
    <el-dialog
      title="客诉上传录音"
      :visible.sync="ks.audio.open"
      width="400px"
      append-to-body
      :close-on-click-modal="!ks.audio.isUploading"
      :show-close="!ks.audio.isUploading"
    >
      <el-upload
        action="#"
        ref="audio"
        :limit="5"
        accept=".wav,.mp3,.m4a"
        :headers="ks.audio.headers"
        :disabled="ks.audio.isUploading"
        :on-exceed="audioExceed"
        :on-change="ksAudioFileChange"
        :before-upload="audioBeforeUpload"
        :auto-upload="false"
        drag
        :file-list="ks.audio.uploadFiles"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入mp3/wav/m4a格式文件,每个小于5M,最多3段录音</span>
        </div>
      </el-upload>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitKsAudioForm" :loading="ks.audio.isUploading"
                   :disabled="ks.audio.isUploading">
          {{ ks.audio.isUploading ? '上传中...' : '确 定' }}
        </el-button>
        <el-button @click="closeKsAudioUploadPage" :disabled="ks.audio.isUploading">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {addKsOrderReplyLogAndUpload} from "@/api/hmk/order";
import {getToken} from "@/utils/auth";

export default {
  name: 'QrcodeRedirect',
  mounted() {
    const {orderId, ksId, referenceId, referenceContent} = this.$route.query;
    console.log('orderId, ksId, referenceId, referenceContent', orderId, ksId, referenceId, referenceContent);
    this.orderId = orderId;
    this.ksId = ksId;
    if (referenceId != null && referenceId != '') {
      this.referenceId = referenceId;
    }
    if (referenceContent != null && referenceContent != '') {
      this.referenceContent = referenceContent;
    }
    this.audioPlayer = new Audio();
  },
  data() {
    return {
      ks: {
        auditForm: {
          auditUserId: null,
          content: null,
        },
        auditUserIds: [],
        auditFormVisible: false,
        closeFormVisible: false,
        closeForm: {
          content: null,
        },
        active: 1,
        image: {
          imageResUrls: [],
          uploadFiles: [],
          open: false,
          isUploading: false,
          headers: {Authorization: "Bearer " + getToken()}
        },

        audio: {
          audioResUrls: [],
          uploadFiles: [],
          open: false,
          isUploading: false,
          headers: {Authorization: "Bearer " + getToken()}
        },
      },

      ksOrderReplyForm: {
        referenceVisible: false,
        replyContent: null,
        referenceContent: null,
        referenceId: null,
      },
      showAudioFileList: false,
      audioPlayer: null,
      currentPreviewIndex: null,
      isPlaying: false,
      ksId: null,
      orderId: null,
      referenceId: null,
      referenceContent: null,
      imageResUrls: [],


    }
  },
  methods: {
    closeKsAudioUploadPage() {
      this.ks.audio.uploadFiles = [];
      this.ks.audio.open = false;
    },
    submitKsAudioForm() {
      if (this.ks.audio.uploadFiles.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }
      if (this.ks.attachmentTxt) {
        this.ks.attachmentTxt += "[已选录音" + this.ks.audio.uploadFiles.length + "段]";
      } else {
        this.ks.attachmentTxt = "[已选录音" + this.ks.audio.uploadFiles.length + "段]";
      }

      if ((this.ks.audio.uploadFiles.length) > 3) {
        this.$message.warning("你本次上传的总数大于3,请删除一些");
        return;
      }
      this.$message.success("请输入跟进消息并点击发送!");
      this.ks.audio.open = false;
    },
    audioBeforeUpload(file) {
      const isAudio = ['audio/mpeg', 'audio/wav', 'audio/mp4', 'audio/x-m4a'].includes(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isAudio) {
        return this.$message.error('音频只能是mp3/wav/m4a 格式!');

      }
      if (!isLt5M) {
        return this.$message.error('音频大小不能超过 5MB!');
      }
      return isAudio && isLt5M;
    },
    ksAudioFileChange(file, fileList) {
      this.ks.audio.uploadFiles = fileList;
    },

    submitKsImageForm() {
      if (this.ks.image.uploadFiles.length === 0) {
        this.$message.warning("请先选择文件");
        return;
      }
      if (this.ks.attachmentTxt) {
        this.ks.attachmentTxt += "[已选图片" + this.ks.image.uploadFiles.length + "张]";
      } else {
        this.ks.attachmentTxt = "[已选图片" + this.ks.image.uploadFiles.length + "张]";
      }
      if ((this.ks.image.uploadFiles.length) > 5) {
        this.$message.warning("你本次上传的总数大于5,请删除一些");
        return;
      }
      this.$message.success("请输入跟进消息并点击发送!");
      this.ks.image.open = false;
    },

    imageBeforeUpload(file) {
      const isJPG = ['image/jpeg', 'image/png'].includes(file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        return this.$message.error('图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt2M) {
        return this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    ksImageFileChange(file, fileList) {
      this.ks.image.uploadFiles = fileList;
    },
    closeKsImageUploadPage() {
      this.ks.image.uploadFiles = [];
      this.ks.image.open = false;
    },
    audioExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    imageExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    ksImportAudio() {
      this.ks.audio.uploadFiles = [];
      this.ks.audio.audioResUrls = [];
      this.ks.audio.open = true;
    },
    importKsOrderImage() {
      this.ks.imageResUrls = [];
      this.ks.image.uploadFiles = [];
      this.ks.image.open = true;
    },
    ksOrderReplyFormSubmit() {
      const formData = new FormData();
      console.log(this.ks.image.uploadFiles)
      this.ks.image.uploadFiles.forEach(file => {
        formData.append("files", file.raw);
      });
      this.ks.audio.uploadFiles.forEach(file => {
        formData.append("audioFiles", file.raw);
      });
      if (this.ksOrderReplyForm.replyContent) {
        formData.append("replyContent", this.ksOrderReplyForm.replyContent);
      } else {
        this.$modal.msgError('回复消息必填!')
        return
      }
      if (this.referenceId) {
        console.log('this.referenceId不是空')
        formData.append("referenceId", Number(this.referenceId));
      } else {
        console.log('this.referenceId是空')
      }
      if (this.referenceContent) {
        formData.append("referenceContent", this.referenceContent);
      } else {
        console.log('this.referenceContent是空')
      }
      if (this.orderId) {
        formData.append("orderId", this.orderId);
      } else {
        this.$modal.msgError('orderId必填!')
        return
      }
      if (this.ksId) {
        formData.append("ksId", this.ksId);
      } else {
        this.$modal.msgError('ksId必填!')
        return
      }
      console.log('formData', Array.from(formData.entries()));
      this.loading = true;
      addKsOrderReplyLogAndUpload(formData).then(res => {
        this.ksOrderReplyForm.replyContent = null;
        this.$modal.msgSuccess('已提交,请到电脑端刷新消息!')
      })
      this.ks.image.open = false;
      this.loading = false;
    },
  }
};
</script>

